import React from 'react';

import {Table,Icon,Divider} from 'antd';


class NewsList extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            selectedRowKeys:[],
        }
        this.onChangeSelect = this.onChangeSelect.bind(this)
    }

    onChangeSelect = (selectedRowKeys)=>{
        this.setState({selectedRowKeys});
        // console.log(this.state.selectedRowKeys)
    }

    onPageChange(page, pageSize){
        console.log(page,pageSize)
        // const {dispatch} = this.state;
        // dispatch({
        //     type: 'news/fetch',
        //     payload:{
        //         page:page,
        //     },
        // });
        alert(JSON.stringify({
            type: 'news/fetch',
            payload:{
                page,
            },
        }))
    }


    render () {
        const { selectedRowKeys } = this.state;
        const { news,pages,onDetail } = this.props;
        const columns = [
            {
                title:"标题",
                dataIndex:"title",
                key:"title",
                render:(text,record)=>{
                    return (
                        <a onClick={() => onDetail(record.id)}>{text}</a>
                    )
                },
            },
            {
                title:"作者",
                dataIndex:"author",
                key:"author",
            },
            // {
            //     title:"摘要",
            //     dataIndex:"descp",
            //     key:"descp",
            // },
            {
                title:"发布时间",
                dataIndex:"time",
                key:"time",
            },
            {
                title:"操作",
                dataIndex:"action",
                key:"action",
                render:(text,record)=>{
                    return (
                        <span>
                        <a href="javascript:;">edit</a>
                        <Divider type="vertical"/>
                        <a href="javascript:;">delete</a>
                        <Divider type="vertical" />
                        <a href="javascript:;" className="ant-dropdown-link">
                          More actions <Icon type="down" />
                        </a>
                    </span>
                    )
                },
            },
        ]
        const paginationProps = {
            showSizeChanger: true,
            showQuickJumper: true,
            pageSize:pages?pages.page_size:10,
            current:pages?pages.page:1,
            total:pages?pages.total_count:10,
            onChange:this.onPageChange,
        };
        console.log('pagenations:',paginationProps);

        const rowSelection = {
            selectedRowKeys,
            // onChange:(selectedRowKeys,selectedRows)=>{
            //     selectedRowKeys = selectedRowKeys;
            //     console.log(`selectedRowKeys:${selectedRowKeys}; selectedRows:${selectedRows}`)
            // },
            onChange:this.onChangeSelect,
            getCheckboxProps:record=>({
                disabled: record.id===13,
                name:record.title,
            }),
            hideDefaultSelections:true,
            selections:[
                {
                    key:"all-data",
                    text:"选择所有行",
                    onSelect:()=>{
                        this.setState({
                            selectedRowKeys:[...news.keys()],
                        })
                    },
                },
            ],
            // onSelection: this.onSelection,
        }

        return (
            <div>
                <Table rowSelection={rowSelection} dataSource={news} columns={columns} pagination={paginationProps} />
            </div>
        );
    }

};

export default NewsList;